<template>
  <div class="Swiper">
   <router-link to="galary" append>   <!--append用来区分是否是跳转路由 -->
    <div class="wrapper" >
        <swiper :options="swiperOption">
            <!-- 轮播图 -->
            <swiper-slide v-for="item of swiperList" :key="item.id">
              <div class="img-wrapper">
                 <img class="swiper-img" :src="item.imgUrl">
              </div>
              <div class="desc-wrapper">
                 <span class="left">{{item.data}}</span>
                 <span class="middle">{{item.page}}张</span>
                 <span class="right">{{item.number}}</span>
              </div>
            </swiper-slide>
       </swiper>
    </div>
   </router-link>
  </div>
</template>

<script>

export default {
  name: 'detailSwiper',
  // props:{
  //   swiperList:Array
  // },
  data () {
    return {
        swiperOption:{
            loop:true
        },
        swiperList:[
            {
                id:'12432534654654754',
                imgUrl: require('@/assets/img/tv.jpg'),
                data:'两天一晚',
                page:'100',
                number:'220125'
            },
            {
                id:'1243253454',
                imgUrl: require('@/assets/img/qujiang.jpg'),
                data:'两天一晚',
                page:'100',
                number:'220125'
            },
            {
                id:'14754',
                imgUrl: require('@/assets/img/qujiang.jpg'),
                data:'两天一晚',
                page:'100',
                number:'220125'
            },
        ]
    }
  },
}
</script>

<style lang="stylus"  scoped>
.img-wrapper
  overflow:hidden
  height:0
  padding-bottom:41.5%
  background:#ccc
  .swiper-img
    width:100%
    height :3rem
    max-width :100%
.desc-wrapper
  position:absolute
  top:2.78rem
  left:0
  background:rgba(0,0,0,.6)
  color:#fff
  width:100%
  display:flex
  .left
    float:left
    margin-left:.4rem
    color:#fff
    font-size:.3rem
  .middle
    flex:1
    padding-left:4rem
    color:#fff
    font-size:.3rem
  .right:
    float:right
    margin-right:.1rem
    color:#fff
    font-size:.3rem
</style>